export default {
  data () {
    return {
      userList: [],
      // 总页数
      total: 1,
      // 当前页面
      currentPage: 1,
      // 查询数据
      searchText: '',
      dialogAddUserFormVisible: false,
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: {
        username: [
          // 如果内容一个都不填
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 如果内容格式不正确
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          // 如果内容一个都不填
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 如果内容格式不正确
          {
            min: 6,
            max: 10,
            message: '密码长度在 6 到 10 个字符',
            trigger: 'blur'
          }
        ],
        email: [
          {
            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: '邮箱格式错误',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8)\d{9}$/,
            message: '邮箱格式错误',
            trigger: 'blur'
          }
        ]
      },
      dialogEditUserVisible: false,
      editUsersForm: {
        username: '',
        email: '',
        mobile: ''
      }
    }
  },
  created () {
    this.loadUserList()
  },
  methods: {
    /**
     * 加载用户数据
     */
    async loadUserList (pagenum = 1, query = '') {
      const url = '/users'
      const options = {
        params: {
          query,
          pagenum,
          pagesize: 2
        }
      }

      const res = await this.$axios.get(url, options)

      // 获取列表数据
      this.userList = res.data.data.users
      // 总页数
      this.total = res.data.data.total
      // 当前页数
      this.currentPage = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      // console.log(res)
      // // 获取列表数据
      // this.userList = res.data.data.users
      // // 总页数
      // this.total = res.data.data.total
      // // 当前页数
      // this.currentPage = res.data.data.pagenum
      //   })
    },
    /**
     * 页面改变
     */
    curPageChange (cur) {
      // 拿到当前的页数
      // 分页自己的事件里返回的
      // console.log('页面改变了 ', cur)
      this.loadUserList(cur, this.searchText)
    },
    /**
     * 开始 查询
     */
    startQuery () {
      console.log(this.searchText)
      this.loadUserList(1, this.searchText)
    },
    /**
     * 删除 用户
     */
    async delUser (id) {
      console.log(id)

      try {
        // 确认框
        await this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 开启发送请求删除用户
        await this.$axios.delete('/users/' + id)
        // await this.$axios.delete('/users/' + id, {
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   }
        // })

        // 刷新列表
        this.loadUserList(1)

        // 提示
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }

      // this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '删除成功!'
      //     })
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     })
      //   })
    },
    /**
     * 更改状态
     */
    async switchChangeState (row) {
      // 需要一个id值  一个type值 true/false值
      const { id, mg_state: mgState } = row

      // console.log(id, mgState)

      // 发送请求,更改状态
      await this.$axios.put(`/users/${id}/state/${mgState}`)

      // console.log(res)
    },
    /**
     * 显示添加用户对话框
     */
    showAddUserDialog () {
      this.dialogAddUserFormVisible = true
    },
    /**
     * 添加用户
     */
    async addUser () {
      // 获取 form 进行js校验
      // this.$refs.addUserForm.validate(valid => {

      // })

      try {
        // 校验
        await this.$refs.addUserForm.validate()

        console.log('校验正常')

        // 添加用户
        const res = await this.$axios.post('/users', this.addUserForm)
        console.log(res)

        // 添加用法完毕,关闭对话框
        this.dialogAddUserFormVisible = false

        // 刷新页面
        this.loadUserList()

        // 提示添加成功
        this.$message({
          message: '添加用户成功',
          type: 'success'
        })
      } catch (error) {
        console.log('校验失败')
      }
    },
    /**
     * 展示编辑对话框
     */
    showEditDialig (row) {
      console.log(row)

      // 把拿到的对象信息,赋值给 editUserForm
      this.editUsersForm = row

      this.dialogEditUserVisible = true
    },
    /**
     * 更新用户
     */
    async updateUser () {
      // 需要id email mobile
      const { id, email, mobile } = this.editUsersForm

      // 更新用户
      const res = await this.$axios.put(`/users/${id}`, {
        email,
        mobile
      })
      console.log(res)

      // 关闭编辑对话框
      this.dialogEditUserVisible = false
    }
  }
}
